<template>
  <el-drawer
    title="调试结果"
    size="45%"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
  >
    <template>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-left: 10px"
      >
        <el-tab-pane label="请求信息" name="first">
          <el-row :gutter="2">
            <el-col :span="4">
              <el-tag size="mini">
                请求方式：{{ ApiResultDrawer.method }}
              </el-tag>
            </el-col>
            <el-col :span="20"
            ><span style="font-size: 12px">请求路径：{{
                ApiResultDrawer.url
              }}</span></el-col
            >
          </el-row>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="请求头" name="1">
              <div
                v-for="(item, index) in ApiResultDrawer.requestHeader"
                :key="index"
              >
                {{ item.key }} : {{ item.value }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="请求参数" name="2">
                            <pre
                              style="
                  height: 300px;
                  overflow-y: auto;
                  white-space: pre-wrap !important;
                  word-wrap: break-word !important;
                "
                            >
              <div v-for="(item,index) in ApiResultDrawer.requestParams" :key="index">{{ item.key }} : {{ item.value }}</div>
              </pre>
            </el-collapse-item>
            <el-collapse-item
              v-if="ApiResultDrawer.requestParamType == 'raw'"
              title="body"
              name="3"
            >
              <pre>{{ ApiResultDrawer.requestBody }}</pre>
            </el-collapse-item>
            <el-collapse-item
              v-if="ApiResultDrawer.requestParamType == 'form'"
              title="dataForm"
              name="3"
            >
              <div
                v-for="(item, index) in ApiResultDrawer.requestDataParams"
                :key="index"
              >
                {{ item.key }} : {{ item.value }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="响应详情" name="second">
          <el-row :gutter="1">
            <el-col :span="4">
              <el-tag size="mini"
              >响应状态码：{{ ApiResultDrawer.resultStatus }}
              </el-tag
              >
            </el-col>
            <el-col :span="4">
              <el-tag size="mini"
              >响应时间为：{{ ApiResultDrawer.resultTime }}毫秒
              </el-tag
              >
            </el-col>
          </el-row>
          <el-tabs v-model="responseActiveName"
                   @tab-click="handleClick">
            <el-tab-pane label="响应体" name="responseBody">
              <template>
                <editor
                  v-if = "drawer"
                  v-model="editorText"
                  @init="editorInit"
                  lang="json"
                  :options="editorOptions"
                  theme="chrome"
                  width="100%"
                  height="600px"
                >
                </editor>

              </template>
            </el-tab-pane>
            <el-tab-pane label="响应头" name="responseHeaders">
                  <pre>
                    <div v-for="(item,index) in ApiResultDrawer.responseHeaders"
                         :key="index">{{ item.key }} : {{ item.value }}</div>
                  </pre>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="验证结果" name="third">
          <el-divider content-position="left">断言结果</el-divider>
          <el-table
            :data="ApiResultDrawer.resultAssert"
            border
            size="mini"
          >
            <el-table-column
              prop="checkList"
              label="表达式"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="value"
              label="预期结果"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="realValue"
              label="实际结果"
              align="center"
            ></el-table-column>
            <el-table-column prop="result" label="对比结果" align="center">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.result == true">
                  成功
                </el-tag>
                <el-tag size="mini" v-else type="danger"> 失败</el-tag>
              </template>
            </el-table-column
            >
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="提取结果" name="getParameterExtractions">
          <el-divider content-position="left">提取参数</el-divider>
          <el-table
            :data="ApiResultDrawer.resultExtractions"
            border
            size="mini"
          >
            <el-table-column
              prop="extractName"
              label="提取名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="expression"
              label="提取表达式"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="value"
              label="结果"
              align="center"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="异常信息" name="fourth">{{ ApiResultDrawer.exceptionBody }}</el-tab-pane>
      </el-tabs>
    </template>
  </el-drawer>
</template>

<script>
  import ECharts from '@/components/Echarts';

  export default {
    props: {
      ApiResultDrawer: {
        type: Object,
      },
      drawer: {
        type: Boolean,
      },
    },
    components: {
      ECharts,
      editor: require("vue2-ace-editor"),
    },
    data() {
      return {
        responseActiveName: 'responseBody',
        editorOptions: {
          // 设置代码编辑器的样式
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
          tabSize: 2,
          fontSize: 12,
          showPrintMargin: false, //去除编辑器里的竖线
          readOnly: true
        },
        editorText:this.ApiResultDrawer.resultBody,
        errorMsg: "暂无异常信息",
        activeName: "third",
        activeNames: ["1", "2"],
        direction: "rtl",
      };
    },
    methods: {
      editorInit() {
        require("brace/theme/chrome");
        require("brace/ext/language_tools"); //language extension prerequsite...
        require("brace/mode/yaml");
        require("brace/mode/json");
        require("brace/mode/less");
        require("brace/snippets/json");
      },
      js(str) {
        return this.$jstest.jsFormat(str);
      },
      handleClose(done) {
        this.$emit("changeDrawer");
        this.activeName = "third";
      },
      handleClick(tab, event) {
        console.log("进入方法")
        this.editorText = this.ApiResultDrawer.resultBody
        console.log(tab, event);
      },
      handleChange(value){
        console.log(value);
      }
    },
  };
</script>


<style scoped>
  pre {
    height: 200px;
    overflow-y: auto;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  .el-scrollbar {
    height: 500px;
  }

  .is-horizontal {
    height: 0px;
    left: 0px;
    display: none;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }


</style>
